<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>添加页面</title>
</head>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="/js/jquery-form.js"></script>
<script>
    function upload(){
          var form = {
              type:'post',
              url:"/upload.do",
              dataType:'json',
              success:function(data){
                  //回显图片 目的把data里面url赋值给img标签的src属性
                  $("img").prop("src",data.url);
                  //动态为隐藏的url赋值
                  $("#url").val(data.url);
              },
              error:function(){
                  alert("上传出错了!")
              }
          }
          //使用jquery-form.js 进行上传处理
        $("#form1").ajaxSubmit(form);
    }
</script>
<body>
<form action="/add.do" method="post" id="form1">
    <table class="table table-stripped table-bordered table-hover table-condensed" style="width: 500px;text-align: center;">
        <tr>
            <td>手机名称：</td>
            <td><input type="text" name="name" class="form-control"></td>
        </tr>
        <tr>
            <td>手机价格：</td>
            <td><input type="text" name="price"></td>
        </tr>
        <tr>
            <td>出厂日期：</td>
            <td><input type="date" name="date"></td>
        </tr>
        <tr>
            <td>是否热卖：</td>
            <td>
                <input type="radio" name="isHot" value="1" checked>是
                <input type="radio" name="isHot" value="0">否
            </td>
        </tr>
        <tr>
            <td>商品描述：</td>
            <td>
                <textarea cols="30" rows="10" name="description"class="form-group"></textarea>
            </td>
        </tr>
        <tr>
            <td>品牌：</td>
            <td>
                <select name="typeid" class="form-control">
                    <option>全部</option>
                    <c:forEach items="${types}" var="type">
                        <option value="${type.tid}">${type.tname}</option>
                    </c:forEach>
                </select>
            </td>
        </tr>
        <tr>
            <td>上传图片</td>
            <td>
                <img src="image/pic1.jpg" alt="预览图片" id="img" width="100px" height="100px">
                <input type="file" name="myfile" onchange="upload()">
                <%--url隐藏域--%>
                <input type="hidden" name="url" id="url">
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <input type="submit" value="新增">
                <input type="reset" value="重置">
                <input type="button" value="返回" onclick="window.history.go(-1)">

            </td>
        </tr>
    </table>
</form>

</body>
</html>
